// 横向进图条组件
import { defineComponent } from 'vue';
import { ToFixTOOL } from '@utils/index';
import './style.scss';

export default defineComponent({
  name: 'TiBar',
  props: {
    value: Number,
    color: String,
    width: Number,
  },
  render(props: any) {
    const { value, color, width = 100 } = props;
    const colorValue = (width / 100) * (value || 0);
    return (
      <div
        id="TiBar"
        style={{
          width: width + 'px',
        }}
      >
        <p
          style={{
            width: colorValue + 'px',
            height: '12px',
          }}
        >
          <main
            style={{
              background: color,
            }}
          ></main>
        </p>
        <span style={colorValue > width * 0.9 ? { right: '0px' } : { left: colorValue + 'px' }}>
          {ToFixTOOL(value)}
        </span>
      </div>
    );
  },
});
